<template>
  <div>
    <!-- <el-progress :text-inside="true" :stroke-width="24" :percentage="percentage" status="success"></el-progress> -->

    

    <el-upload ref="upload" :limit="1" :accept="upload.file_type" :action="upload.url" :data="upload.data" :before-upload="beforeAvatarUpload" :headers="upload.headers" :on-change="changeFile" :show-file-list="true" :file-list="upload.fileList" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="true">
      <el-tag slot="file" slot-scope="{file}">{{file.name}}</el-tag>
      <!-- <el-tag slot="file" slot-scope="{file}">{{file.name}}</el-tag> -->
     <!--  <el-button slot="trigger" size="small" type="primary" @click="handleAdd">选取文件</el-button> -->
      <el-button slot="trigger" size="small" type="primary" @click="handleAdd">选取文件</el-button>
      <!-- <el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading" @click="submitUpload">上传到服务器</el-button> -->
      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
    </el-upload>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
  data() {
    return {
      percentage: 0,
      // 上传参数
      upload: {
        file_type: ".jpg, .png",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/dr/upload/morefile", //onefile
        url: process.env.VUE_APP_BASE_API + "/dr/upload/onefile",
        // 上传的文件列表
        fileList: [],
        // projectno:  drfb 41862   kfly 1161225  gzgx 726724 drcy 418325   file_module drfbtu shuizhitu zhuzhuangtu
        data: {
          projectno: 100,
          file_type: ".png",
          projectno: 2,
          file_type: ".png",
          // time: new Date().toString(),
          uploader: "admin",
          content: "文件说明",
          file_module: "钱科旭",
        },
      },
    };
  },
  computed: {
    fileName() {
      console.log(this.upload.fileList[0]);
      return this.upload.fileList[0];
    },
  },
  methods: {
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        "system/user/importTemplate",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
    },
    beforeAvatarUpload(file) {
      console.log(this.upload.fileList[0]);
      console.log(file.name);
    },
    changeFile(file, fileList){
     /*  this.fileList.push(file);
      console.log(this.fileList); */
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
     /*  console */
      console.log(event);
      console.log(file);
      this.upload.isUploading = true;
      this.percentage = ((event.loaded / event.total) * 100) | 0; //百分比
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();

      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        response.msg +
        "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );

      console.log(response.url);
    },
    handleAdd() {
      this.percentage = 0;
      // this.projectno= 3;
      this.upload.data.projectno=10
      this.upload.data.file_module="shuizhitu" 
      console.log("kk")
      //this.upload.fileList = [];
    },
    handleUpdate(row) {
      this.upload.fileList = [
        { name: this.form.fileName, url: this.form.filePath },
      ];
    },
    // 文件提交处理
    submitUpload() {
      this.$refs.upload.submit();
    },
  },
};
</script>
<style scoped>
.table,
th,
tr {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}
</style>